{template 'header'}
 <style type="text/css">
.order-paid-a-page {
    padding-bottom:0.2rem;
    width:100%;
    height:100%;
    padding-bottom:20px;
    font-size:0;
}
.order-paid-a-page .order-box:active {
    background-color:#F6F6F6;
}
.order-paid-a-page .order-block {
    padding:0.22rem 0 0 0;
    background-color:#fff;
    margin-bottom:0.12rem;
}
.order-paid-a-page .order-block .product-list-title {
    color:#000;
    font-size:0.18rem;
    font-weight:bold;
    padding-left:0.2rem;
}
.order-paid-a-page .order-block .product-box {
    padding:0.16rem;
    width:100%;
    position:relative;
    border-bottom:1px solid rgba(238, 238, 238, .6);
}
.order-paid-a-page .order-block .product-box:last-child {
    border-bottom:none;
}
.order-paid-a-page .order-block .product-box:active {
    background-color:#f6f6f6;
}
.order-paid-a-page .order-block .product-box .product-avatar {
    width:1.25rem;
    height:0.7rem;
    border-radius:6px;
    margin-right:0.12rem;
    background-size:cover;
    background-position:center;
    -webkit-flex-shrink:0;
    -ms-flex-negative:0;
    flex-shrink:0;
    position:relative;
}
.order-paid-a-page .order-block .product-box .product-info {
    height:0.7rem;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
}
.order-paid-a-page .order-block .product-box .product-info .product-title {
    font-size:0.16rem;
    color:#4a4a4a;
    font-weight:500;
}
.order-paid-a-page .order-block .product-box .product-info .product-title .product-recom {
    background-color:#FE5164;
    color:#fff;
    font-size:0.12rem;
    vertical-align:middle;
    line-height:0.18rem;
    border-radius:4px;
    padding:2px;
    margin-right:4px;
}
.order-paid-a-page .order-block .product-box .product-info .unread-tip {
    font-size:0.12rem;
    color:#9b9b9b;
}
.order-paid-a-page .order-block .product-box .product-info .del-price {
    color:#979797;
    font-size:0.12rem;
    lineheight:0.2rem;
}
.order-paid-a-page .order-block .product-box .product-info .redbag {
    position:absolute;
    right:0.16rem;
    bottom:14px;
}
.order-paid-a-page .order-block .product-box .product-info .redbag span {
    display:inline-block;
    width:1.04rem;
    height:0.24rem;
    font-size:14px;
    color:#fff;
    text-align:center;
    border-radius:14px;
    line-height:23px;
    background-color:#FFE1DB;
}
.order-paid-a-page .order-block .product-box .product-info .redbag img {
    width:30px;
    position:absolute;
    right:-3px;
    top:-10px;
}
.order-paid-a-page .study-tip {
    position:absolute;
    top:-0.2rem;
    right:-0.3rem;
    -webkit-animation:handleTip 7s 2s 1 both;
    animation:handleTip 7s 2s 1 both;
}
.order-paid-a-page .study-tip img {
    width:0.42rem;
    -webkit-animation:tipImg 1s 3s both;
    animation:tipImg 1s 3s both;
}
.order-paid-a-page .study-tip .big {
    width:14px;
    height:14px;
    background-color:rgba(247, 183, 76, 0.6);
    border-radius:50%;
    padding:2px;
    position:absolute;
    bottom:-7px;
    left:-7px;
    -webkit-animation:dotShink 1s 1s infinite;
    animation:dotShink 1s 1s infinite;
}
.order-paid-a-page .study-tip .big .small {
    width:10px;
    height:10px;
    background-color:rgba(247, 183, 76, 0.6);
    border-radius:50%;
    -webkit-animation:dotShink 1s 0s infinite;
    animation:dotShink 1s 0s infinite;
}
.order-paid-a-page .study-tip .tip-word {
    width:1.58rem;
    height:23px;
    line-height:23px;
    text-align:center;
    font-size:0.12rem;
    position:absolute;
    color:#fff;
    top:-12px;
    right:-1.58rem;
    overflow:hidden;
}
.order-paid-a-page .study-tip .tip-word div {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(247, 183, 76, 1);
    border-radius:0.16rem;
    -webkit-animation:showTipWord 2s 4s 1 both;
    animation:showTipWord 2s 4s 1 both;
}
.order-paid-a-page .order-tip {
    background-color:#F7B74C!important;
}
@-webkit-keyframes dotShink {
    0% {
        opacity:0.3;
        -webkit-transform:scale(0.5);
        -ms-transform:scale(0.5);
        transform:scale(0.5);
    }
    100% {
        opacity:1;
        -webkit-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1);
    }
}
@keyframes dotShink {
    0% {
        opacity:0.3;
        -webkit-transform:scale(0.5);
        -ms-transform:scale(0.5);
        transform:scale(0.5);
    }
    100% {
        opacity:1;
        -webkit-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1);
    }
}
@-webkit-keyframes showTipWord {
    0% {
        opacity:0.6;
        -webkit-transform:translateX(-100%);
        -ms-transform:translateX(-100%);
        transform:translateX(-100%);
    }
    100% {
        opacity:1;
        -webkit-transform:translateX(0);
        -ms-transform:translateX(0);
        transform:translateX(0);
    }
}
@keyframes showTipWord {
    0% {
        opacity:0.6;
        -webkit-transform:translateX(-100%);
        -ms-transform:translateX(-100%);
        transform:translateX(-100%);
    }
    100% {
        opacity:1;
        -webkit-transform:translateX(0);
        -ms-transform:translateX(0);
        transform:translateX(0);
    }
}
@-webkit-keyframes handleTip {
    0% {
        opacity:0;
    }
    10% {
        opacity:1;
    }
    90% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}
@keyframes handleTip {
    0% {
        opacity:0;
    }
    10% {
        opacity:1;
    }
    90% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}
@-webkit-keyframes tipImg {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
@keyframes tipImg {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
</style>
            <div class="order-paid-a-page">
            	{if $mylist}
                <div class="order-block">
                    <p class="product-list-title">已购买课程</p>
                    {loop $mylist $ml}
                    <a href="{php echo $this->murl('bindex',array('id'=>$ml['id']))}" class="product-box g-normal-a g-flex">
                        <div class="product-avatar anm-fade-in" style="background-image: url('{php echo toimage($mlbook[$ml['bid']]['thumb'])}');"></div>
                        <div class="g-flex row-between product-info">
                            <p class="product-title" style="color: rgb(151, 151, 151);">{if $mlbook[$ml['bid']]['label']}<span class="product-recom">{$mlbook[$ml['bid']]['label']}</span>{/if}{$mlbook[$ml['bid']]['title']}</p>
                            <div class="unread-tip">
                            	{if $mlog[$ml['id']]}
                                <p>今日已学</p>
                                {else}
                                <p>今日未学</p>
                                {/if}
                            </div>
                        </div>
                    </a>
                    {/loop}
                </div>
                {/if}
                <div class="order-block">
                    <p class="product-list-title">精品推荐</p>
                    {loop $list $l}
                    <a href="{php echo $this->murl('detail',array('id'=>$l['id']))}" class="g-normal-a" style="border-bottom: 1px solid rgba(238, 238, 238, 0.6);">
                        <div class="g-flex col-center product-box">
                            <div class="product-avatar anm-fade-in" style="background-image: url('{php echo toimage($l['thumb'])}');"></div>
                            <div class="g-flex product-info row-between">
                                <p class="product-title">{if $l['label']}<span class="product-recom">{$l['label']}</span>{/if}{$l['title']}</p><del class="del-price">原价¥{$l['original']}</del>
                                <div class="redbag"><span class="g-main-bg">领红包</span>
                                    <img src="{RES}img/redp.png" class="g-animation-swing">
                                </div>
                            </div>
                        </div>
                    </a>
                    {/loop}
                </div>
                <div class="g-tip order-tip" style="position: fixed; top: -30px; left: 0px; width: 100%; height: 30px; text-align: center; line-height: 30px; background-color: rgb(254, 81, 100); color: rgb(255, 255, 255); letter-spacing: 1px; font-size: 15px; transition: all 0.5s;">今日还有0节未学</div>
            </div>
        </div>
{template 'loading'}
    </body>
</html>
